<script setup>
import {reactive} from 'vue'

const demoData = {
  value: 60
}
const dataChart = reactive({
  title: {
    text: '45%',
    x: '50%',
    y: '40%',
    textAlign: 'center',
    itemGap: 0,
    textStyle: {
      fontWeight: '500',
      color: '#0E97F3',
      fontFamily: 'DIN-Medium, DIN',
      fontSize: 53
    },
    subtext: '平均考勤率',
    subtextStyle: {
      fontSize: 14,
      color: '#fff'
    }
  },
  series: [
    {
      type: 'gauge',
      radius: '100%',
      center: ['50%', '70%'],
      splitNumber: 12,
      min: 0,
      max: 100,
      startAngle: 180,
      endAngle: 0,
      itemStyle: {
        color: '#0E97F3'
      },
      axisLine: {
        show: true,
        lineStyle: {
          width: 5,
          color: [[0, '#0E97F3'], [1, '#01060C']]
        }
      },
      progress: {
        show: true,
        roundCap: true,
        width: 8
      },
      splitLine: {
        distance: -20,
        length: 12,
        lineStyle: {
          width: 2,
          color: '#01060C'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      data: [
        {
          value: demoData.value,
          detail: {
            show: false
          }
        }
      ],
      pointer: {
        show: true,
        length: '46%',
        icon: 'rect',
        width: 5, //指针粗细
        itemStyle: {
          color: '#006DB7'
        },
        offsetCenter: [0, '-65%']
      }
    },
    {
      type: 'pie',
      radius: ['65%', '77%'],
      center: ['50%', '70%'],
      startAngle: 180,
      endAngle: 0,
      color: 'transparent',
      legendHoverLink: false,
      z: 10,
      emphasis: {
        disabled: true
      },
      data: [
        {value: (50 * (demoData.value + 10)) / 100},
        {value: 100 - (50 * (demoData.value + 10)) / 100}
      ]
    },
    {
      type: 'pie',
      label: {
        show: false
      },
      center: ['50%', '70%'],
      radius: ['0%', '75%'],
      startAngle: 180,
      emphasis: {
        disabled: true
      },
      data: [
        {
          value: 100,
          itemStyle: {
            color: '#061F49'
          }
        },
        {
          value: 100,
          color: 'transparent'
        }
      ]
    }
  ]
})
const dataChart2 = reactive({
  title: {
    text: '80',
    x: '50%',
    y: '35%',
    textAlign: 'center',
    itemGap: -5,
    textStyle: {
      fontWeight: '500',
      color: '#0E97F3',
      fontFamily: 'DIN-Medium, DIN',
      fontSize: 53
    },
    subtext: '整体信用评价\n百分制',
    subtextStyle: {
      fontSize: 14,
      color: '#fff',
      lineHeight: 18
    }
  },
  series: [
    {
      type: 'gauge',
      radius: '100%',
      center: ['50%', '70%'],
      splitNumber: 12,
      min: 0,
      max: 100,
      startAngle: 180,
      endAngle: 0,
      itemStyle: {
        color: '#0E97F3'
      },
      axisLine: {
        show: true,
        lineStyle: {
          width: 5,
          color: [[0, '#0E97F3'], [1, '#01060C']]
        }
      },
      progress: {
        show: true,
        roundCap: true,
        width: 8
      },
      splitLine: {
        distance: -20,
        length: 12,
        lineStyle: {
          width: 2,
          color: '#01060C'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      data: [
        {
          value: demoData.value,
          detail: {
            show: false
          }
        }
      ],
      pointer: {
        show: true,
        length: '46%',
        icon: 'rect',
        width: 5, //指针粗细
        itemStyle: {
          color: '#006DB7'
        },
        offsetCenter: [0, '-65%']
      }
    },
    {
      type: 'pie',
      radius: ['65%', '77%'],
      center: ['50%', '70%'],
      startAngle: 180,
      endAngle: 0,
      color: 'transparent',
      legendHoverLink: false,
      z: 10,
      emphasis: {
        disabled: true
      },
      data: [
        {value: (50 * (demoData.value + 10)) / 100},
        {value: 100 - (50 * (demoData.value + 10)) / 100}
      ]
    },
    {
      type: 'pie',
      label: {
        show: false
      },
      center: ['50%', '70%'],
      radius: ['0%', '75%'],
      startAngle: 180,
      emphasis: {
        disabled: true
      },
      data: [
        {
          value: 100,
          itemStyle: {
            color: '#061F49'
          }
        },
        {
          value: 100,
          color: 'transparent'
        }
      ]
    }
  ]
})
</script>

<template>
  <div class="work-bg">
    <div class="common-title">劳务人员</div>
    <div class="work-list">
      <v-chart class="work-chart" :option="dataChart" autoresize></v-chart>
      <v-chart class="work-chart" :option="dataChart2" autoresize></v-chart>
    </div>
  </div>
</template>


<style scoped>
.work-bg {
  margin: 22px 27px 0 27px;
  background: url("../assets/bg-unit.png") no-repeat;
  background-size: 100% 100%;
  height: 334px;
}
.work-list {
  display: flex;
  justify-content: space-around;
  margin-top: -5px;
}
.work-chart {
  width: 348px;
  height: 288px;
}
</style>